<!-- 菜单 -->
<template>
	<view class="container">
		<view class="card" v-for="(item, index) in cardList" :key="index">
			<text class="title">{{item.title}}</text>
			<view class="grid">
				<template v-for="(sub, idx) in item.menu" :key="idx">
					<button v-if="sub.isService" class="grid-item" open-type="contact">
						<image class="icon" :src="sub.icon" mode="aspectFit"></image>
						<text class="name">{{sub.name}}</text>
					</button>
					<view v-else class="grid-item" @click="handleNavTo(sub)">
						<image class="icon" :src="sub.icon" mode="aspectFit"></image>
						<text class="name">{{sub.name}}</text>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { useUserStore } from "@/store/user.js";

	const userStore = useUserStore();

	const cardList = [{
			title: '我的钱包',
			menu: [{
					icon: '/pagesC-my/static/images/my/coupon.svg',
					name: '优惠券',
					url: '/pagesC-my/discount-coupon/index',
					checkLogin: true
				},
				{ icon: '/pagesC-my/static/images/my/wallet.svg', name: '余额', url: '', checkLogin: true },
			]
		},
		{
			title: '我的服务',
			menu: [{
					icon: '/pagesC-my/static/images/my/goods-order.svg',
					name: '订单',
					url: '/pagesC-order/index/index',
					isRelaunch: true
				},
				{
					icon: '/pagesC-my/static/images/my/service-order.svg',
					name: '需求',
					url: '/pagesC-my/my-needs/index',
					checkLogin: true
				},
				{
					icon: '/pagesC-my/static/images/my/ask.svg',
					name: '提问',
					url: '/pagesC-my/my-ask/index',
					checkLogin: true
				},
				{
					icon: '/pagesC-my/static/images/my/cart.svg',
					name: '购物车',
					url: '/pagesC-my/shopping-cart/index',
					checkLogin: true
				},
			]
		},
		{
			title: '其它服务',
			menu: [
				{ icon: '/pagesC-my/static/images/my/help.svg', name: '帮助中心', url: '' },
				{
					icon: '/pagesC-my/static/images/my/share.svg',
					name: '好友分享',
					url: '/pagesC-my/invite-friend/index',
					checkLogin: true
				},
				{
					icon: '/pagesC-my/static/images/my/address.svg',
					name: '我的地址',
					url: '/pagesC-shopping/address-manage/index',
					checkLogin: true
				},
				{
					icon: '/pagesC-my/static/images/my/collect.svg',
					name: '我的收藏',
					url: '/pagesC-my/collection/index',
					checkLogin: true
				}, {
					icon: '/pagesC-my/static/images/my/feedback.svg',
					name: '意见反馈',
					url: '/pagesC-my/feedback/index',
					checkLogin: true
				},
				{
					icon: '/pagesC-my/static/images/my/customer-service.svg',
					name: '在线客服',
					url: '',
					isService: true
				},
				{ icon: '/pagesC-my/static/images/my/private.svg', name: '隐私政策', url: '' },
			]
		}
	];

	const handleNavTo = (item) => {
		if (item.checkLogin && !userStore.token) {
			userStore.SET_SHOW_LOGIN_PANEL();
			return;
		}

		if (!item.url) return;

		if (item.isRelaunch) {
			uni.reLaunch({
				url: item.url
			})
		} else {
			uni.navigateTo({
				url: item.url
			});
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 10rpx 25rpx 20rpx;

		.card {
			background-color: white;
			border-radius: 20rpx;
			padding: 25rpx 0 30rpx;
			margin-top: 26rpx;

			.title {
				display: block;
				font-weight: bold;
				font-size: 32rpx;
				color: #222222;
				line-height: 1.5;
				padding-left: 34rpx;
			}

			.grid {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				column-gap: 10rpx;
				row-gap: 20rpx;

				&-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-top: 36rpx;
					background-color: transparent;
					transition: transform 0.2s;

					&:active {
						transform: scale(0.9);
					}

					.icon {
						width: 60rpx;
						height: 60rpx;
					}

					.name {
						font-weight: 500;
						font-size: 26rpx;
						color: #222222;
						margin-top: 16rpx;
					}
				}
			}
		}
	}
</style>